<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Example Form</title>

  <!-- jQuery, required for the sample Component plugins -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- Fabric core and Components CSS -->
  <link rel="stylesheet" type="text/css" href="../../css/fabric.css">
  <link rel="stylesheet" type="text/css" href="../../css/fabric.components.css">

  <!-- Application-specific CSS -->
  <link rel="stylesheet" type="text/css" href="css/Form.css">

</head>
<body>
  <main class="Container">
    <div class="Header ms-bgColor-neutralPrimary ms-borderColor-greenLight">
      <div class="Header-text ms-fontColor-white">
        <div class="u-contentCenter">
          <h1 class="Header-title">Nod Publishers</h1>
          <h3 class="Header-subTitle">Check your text.</h3>
        </div>
      </div>
    </div>

    <div class="Content">
      <div class="u-contentCenter">
        <div class="Intro">
          <h2 class="Intro-title ms-fontSize-xl">Create an account to start using Nod.</h2>
        </div>

        <form class="Form">
          <div class="ms-TextField is-required">
            <label class="ms-Label">Country</label>
            <input class="ms-TextField-field" type="text">
            <span class="ms-TextField-description">Can't be changed after sign-up. <a href="#">Why not?</a></span>
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">First name</label>
            <input class="ms-TextField-field" type="text">
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">Last name</label>
            <input class="ms-TextField-field" type="text">
          </div>

          <!-- ChoiceFieldGroups contain multiple radio buttons or checkboxes -->
          <div class="ms-ChoiceFieldGroup">
            <div class="ms-ChoiceFieldGroup-title">
              <label class="ms-Label">Title</label>
            </div>
            <div class="ms-ChoiceField ms-ChoiceFieldGroup">
              <input name="Title" class="ms-ChoiceField-input" id="Title-Male" type="radio">
              <label class="ms-ChoiceField-field" for="Title-Male"><span class="ms-Label">Mr.</span></label>
            </div>
            <div class="ms-ChoiceField ms-ChoiceFieldGroup">
              <input name="Title" class="ms-ChoiceField-input" id="Title-Female" type="radio">
              <label class="ms-ChoiceField-field" for="Title-Female"><span class="ms-Label">Ms.</span></label>
            </div>
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">Email</label>
            <input class="ms-TextField-field" type="email">
            <span class="ms-TextField-description">We recommend not using your business address. <a href="#">Why not?</a></span>
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">Organization Name</label>
            <input class="ms-TextField-field" type="text">
            <span class="ms-TextField-description">We will use this to create your user ID.</span>
          </div>

          <div class="ms-TextField">
            <label class="ms-Label">Address 1</label>
            <input class="ms-TextField-field" type="text">
          </div>

          <div class="ms-TextField">
            <label class="ms-Label">Address 2</label>
            <input class="ms-TextField-field" type="text">
          </div>
          <div class="ms-TextField">
            <label class="ms-Label">City</label>
            <input class="ms-TextField-field" type="text">
          </div>

          <div class="ms-Dropdown" tabindex="0">
            <label class="ms-Label">State</label>
            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
            <select class="ms-Dropdown-select">
              <option>Choose a state&hellip;</option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="DC">Dist of Columbia</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
          </div>

          <div class="ms-TextField">
            <label class="ms-Label">ZIP code</label>
            <input class="ms-TextField-field" type="number">
          </div>

          <div class="ms-TextField">
            <label class="ms-Label" type="tel">Phone number</label>
            <input class="ms-TextField-field">
          </div>

          <!-- DatePicker component, powered by pickadate.js -->
          <div class="ms-DatePicker">
            <div class="ms-TextField">
              <label class="ms-Label">Birthday</label>
              <i class="ms-DatePicker-event ms-Icon ms-Icon--event"></i>
              <input class="ms-TextField-field" type="text" placeholder="Select a date&hellip;">
            </div>
            <div class="ms-DatePicker-monthComponents">
              <span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--chevronRight"></i></span>
              <span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>
              <div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
            </div>
            <span class="ms-DatePicker-goToday js-goToday">Go to today</span>
            <div class="ms-DatePicker-monthPicker">
              <div class="ms-DatePicker-header">
                <div class="ms-DatePicker-yearComponents">
                  <span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--chevronRight"></i></span>
                  <span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>
                </div>
                <div class="ms-DatePicker-currentYear js-showYearPicker"></div>
              </div>
              <div class="ms-DatePicker-optionGrid">
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span>
                <span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span>
              </div>
            </div>
            <div class="ms-DatePicker-yearPicker">
              <div class="ms-DatePicker-decadeComponents">
                <span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--chevronRight"></i></span>
                <span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--chevronLeft"></i></span>
              </div>
            </div>
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">User ID</label>
            <input class="ms-TextField-field" type="text">
            <span class="ms-TextField-description">You use this to sign in.</span>
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">Password</label>
            <input class="ms-TextField-field" type="password">
            <span class="ms-TextField-description">At least 8 characters. A mix of letters and numbers is best.</span>
          </div>

          <div class="ms-TextField is-required">
            <label class="ms-Label">Confirm Password</label>
            <input class="ms-TextField-field" type="password">
          </div>

          <div class="SubmitButton">
            <button class="ms-Button ms-Button--primary"><span class="ms-Button-label">Create an account</span></button>
          </div>
        </form>
      </div>
    </div>
  </main>
  <!-- Fabric jQuery plugin for DatePicker component -->
  <script src="../../components/DatePicker/Jquery.DatePicker.js"></script>
  <script src="../../components/DatePicker/PickaDate.js"></script>
  <script src="../../components/Dropdown/Jquery.Dropdown.js"></script>
  <script>
    $(document).ready(function() {
        // Check to make sure the DatePicker plugin is available. Then, find 
        // the element you wish to run DatePicker on, and run the plugin on it.
        if ($.fn.DatePicker) {
          $('.ms-DatePicker').DatePicker();
        }
        
        // Check to make sure the Dropdown plugin is available. Then, find 
        // the element you wish to run Dropdown on, and run the plugin on it.
        if ($.fn.Dropdown) {
          $('.ms-Dropdown').Dropdown();
        }
    });
  </script>
</body>
</html>